<script setup lang="ts">
import type { Ref } from 'vue'
import { ref } from 'vue'
import { YiModal, YiTable } from '@uublue/yimi-element-plus'
import moment from 'moment'
const operationTimePeriod: Ref<[string, string] | undefined> = ref()
</script>

<!-- 定义api -->
<script lang="ts">
import logApis from '@/apis/system/log'

const { queryOpLogs } = logApis
export default {
  name: 'OpLog',
  apis: {
    queryOpLogs
  },
}
</script>

<template>
  <div class="app-container">
    <yi-table
      ref="syslogTable"
      :api="
        () => {
          return operationTimePeriod
            ? {
                ...queryOpLogs,
                params: {
                  createTimeStart: operationTimePeriod[0],
                  createTimeEnd: operationTimePeriod[1]
                }
              }
            : queryOpLogs
        }
      "
      :columns="[
        {
          label: '操作名称',
          prop: 'operation'
        },
        {
          label: '操作人员',
          prop: 'username'
        },
        {
          label: '请求地址',
          prop: 'remoteAddr'
        },
        {
          label: '操作结果',
          prop: 'exception',
          slot: 'exception'
        },
        {
          label: '操作时间',
          prop: 'createTime',
          width: 550,
          formatter: (row, column, cellValue) => {
            return moment(cellValue).format('lll')
          }
        },
        {
          label: '耗时',
          prop: 'duration',
          formatter: (row, column, cellValue) => {
            return cellValue + '毫秒'
          }
        },
        {
          label: '操作',
          prop: 'opt',
          slot: 'opt'
        }
      ]"
    >
      <template #conditions="{ model, refresh }">
        <el-form :model="model" inline size="small">
          <el-form-item label="操作名称">
            <el-input v-model="model.operation" placeholder="请输入操作名称"></el-input>
          </el-form-item>
          <el-form-item label="操作人员">
            <el-input v-model="model.username" placeholder="请输入操作人员"></el-input>
          </el-form-item>
          <el-form-item label="请求地址">
            <el-input v-model="model.remoteAddr" placeholder="请输入请求地址"></el-input>
          </el-form-item>
          <el-form-item label="操作时间">
            <el-date-picker
              v-model="operationTimePeriod"
              style="width: 240px"
              format="YYYY-MM-DDTHH:mm:ss"
              value-format="YYYY-MM-DDTHH:mm:ss.SSSZ[Z]"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="请求结果">
            <el-select v-model="model.result" style="width: 80px" clearable placeholder="请选择">
              <el-option label="成功" value="1"> </el-option>
              <el-option label="失败" value="0"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作类型">
            <el-input v-model="model.type" placeholder="请输入操作类型"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="refresh()">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #exception="{ row }">
        <el-tag v-if="row.exception" type="danger">失败</el-tag>
        <el-tag v-else type="success">成功</el-tag>
      </template>
      <template #opt="{ row }">
        <yi-modal text="详情" size="small" type="primary" modal-title="操作详情">
          <el-form label-width="85px" class="detail-form" label-position="left">
            <el-row>
              <el-col :span="12">
                <el-form-item label="操作名称">
                  <span>{{ row.operation }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="操作人员">
                  <span>{{ row.username }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="请求地址">
                  <span>{{ row.remoteAddr }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="操作时间">
                  <span>{{ row.createTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="操作结果">
                  <el-popover
                    v-if="row.exception"
                    placement="right"
                    trigger="hover"
                    :content="row.exception"
                  >
                    <template v-slot:reference>
                      <el-tag type="danger">失败</el-tag>
                    </template>
                  </el-popover>
                  <el-tag v-else type="success">成功</el-tag>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="耗时">
                  <span>{{ row.duration }}毫秒</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="请求路径">
                  <span>{{ row.requestUri }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="请求方式">
                  <span>{{ row.method }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="请求参数">
                  <span>{{ row.args }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </yi-modal>
      </template>
    </yi-table>
  </div>
</template>

<style lang="scss">
.detail-form {
  .el-input__inner {
    border: none !important; /* 去掉边框 */
    box-shadow: none !important; /* 去掉阴影 */
  }
}
</style>
